<!--
 * @Descripttion: 
 * @Author: dengxiaodong
 * @Date: 2024-01-07 18:50:23
 * @LastEditors: dengxiaodong
 * @LastEditTime: 2025-07-22 22:37:19
-->
<template>
  <div class="tableConainer">
    <div class="tableHeader">
      <div
        class="headerTh"
        v-for="(item, index) in tableColumns"
        :key="index"
        :class="item.thTextAlign ? item.thTextAlign : 'center'"
        :style="{
          width: item.width ? item.width : `${100 / tableColumns.length}%`,
        }"
      >
        <div class="text">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div
      class="tableContainer"
      :style="{
        height: tbodyHeight ? `${tbodyHeight}px` : '150px',
      }"
    >
      <div
        :class="tableData.length % 2 === 0 ? 'tbody even' : 'tbody odd'"
        :style="{
          height:
            (tbodyHeight || 150) > rowHeight * tableData.length
              ? `${rowHeight * tableData.length}px`
              : `${tbodyHeight}px`,
        }"
        v-if="tableData.length > 0"
        v-loading="loading"
        element-loading-background="rgba(122, 122, 122, 0)"
      >
        <vue3-seamless-scroll
          :list="tableData"
          :hover="true"
          :style="{
            height:
              (tbodyHeight || 150) > rowHeight * tableData.length
                ? `${rowHeight * tableData.length}px`
                : `${tbodyHeight}px`,
          }"
          :step="1"
          :wheel="wheel ? wheel : true"
          v-model="isScroll"
          :singleHeight="rowHeight || 30"
        >
          <div
            :class="{
              tableRow: true,
              rowClick: rowClick,
            }"
            v-for="(itemRow, index) in tableData"
            :key="index"
            :style="{
              height: rowHeight ? `${rowHeight}px` : '150px',
            }"
            @click="curRowClick(itemRow)"
          >
            <div
              class="tableTd"
              v-for="(itemTd, indexTd) in tableColumns"
              :key="indexTd"
              :class="itemTd.tdTextAlign ? itemTd.tdTextAlign : 'left'"
              :style="{
                width: itemTd.width
                  ? itemTd.width
                  : `${100 / tableColumns.length}%`,
              }"
              @click="curTdClick(itemRow, itemTd.key)"
            >
              <template v-if="typeof itemRow[itemTd.key] === 'object'">
                <div
                  :class="{
                    text: true,
                  }"
                  :style="{
                    ...itemRow[itemTd.key].style,
                  }"
                >
                  {{ itemRow[itemTd.key].text }}
                </div>
              </template>
              <template v-else>
                <div
                  :class="{
                    text: true,
                  }"
                  :style="
                    itemTd.getStyle ? itemTd.getStyle(itemRow[itemTd.key]) : ''
                  "
                >
                  {{ itemRow[itemTd.key] }}
                </div>
              </template>
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
      <div
        v-else
        :style="{
          height: tbodyHeight ? `${tbodyHeight}px` : '150px',
        }"
        class="noData"
        v-loading="loading"
        element-loading-background="rgba(122, 122, 122, 0)"
      >
        暂无数据
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  toRefs,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  nextTick,
} from "vue";

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const props = defineProps({
  tableColumns: Array,
  tableData: Array,
  tbodyHeight: Number,
  rowHeight: Number,
  wheel: Boolean,
  isScroll: Boolean,
  loading: Boolean,
  rowClick: Boolean,
});
const emit = defineEmits(["rowClick", "tdClick"]);
//行点击事件
const curRowClick = (itemRow) => {
  emit("rowClick", itemRow);
};
//单元格点击事件
const curTdClick = (row, td) => {
  emit("tdClick", { row, td });
};
const {
  tableColumns,
  tableData,
  tbodyHeight,
  rowHeight,
  wheel,
  isScroll,
  loading,
} = toRefs(props);
// const timer = ref(null);
// const scrollContainer = ref(null);
// let translateY = ref(0);
// onMounted(() => {
//   nextTick(() => {

//   });
// });
// onBeforeUnmount(() => {
//   clearTimeout(timer.value);
// });
// onUnmounted(() => {
//   clearTimeout(timer.value);
// });
// function handleMouseEnter() {
//   clearTimeout(timer.value);
// }
// function handleMouseLeave() {
//   start();
// }
// // 开启定时器
// function start() {
//   clearTimeout(timer.value);
//   // 定时器触发周期
//   let speed = ref(2000);
//   timer.value = setInterval(ListScroll, speed.value);
// }
// function ListScroll() {
//   let scrollDom = scrollContainer.value;
//   translateY.value = translateY.value + rowHeight.value;
//   if (translateY.value === 2 * tbodyHeight.value) {
//     translateY.value = 0;
//     scrollDom.style.transition = `all 0ms ease-in 0s`;
//   } else {
//     scrollDom.style.transform = `translate(0px, -${translateY.value}px)`;
//     scrollDom.style.transition = `all 1000ms ease-in 0s`;
//   }
// }
</script>

<style lang="scss" scoped>
.tableConainer {
  .tableHeader {
    overflow: hidden;
    width: 100%;
    height: 52px;
  }

  .tableTd,
  .headerTh {
    text-align: center;
    float: left;
  }

  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // font-size: 14px;
    // font-weight: bolder;
    font-weight: 400;
    font-size: 14px;
    color: #709cd0;
  }

  .tableTd {
    color: #0ff;
    font-weight: bolder;
  }

  .headerTh {
    // color: #fff;
    color: #d6e5ff;
    font-size: 16px;

    // border-bottom: 1px solid #1fa7d7;
    // background: linear-gradient(180deg, #004482, #006099);
    // height: 34px;
    .text {
      color: #d6e5ff;
      font-size: 16px;
    }
  }

  .tableTd {
    height: 30px;
    // padding: 0 15px;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .tbody {
    overflow: hidden;
  }

  .bodyContainer {
    transform: translate(0px, 0px);
    transition: all 1000ms ease-in 0s;
    overflow: hidden;
  }

  .tableRow {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .tbody.odd > div > div > div:nth-child(1) .tableRow:nth-child(odd),
  .tbody.odd > div > div > div:nth-child(2) .tableRow:nth-child(2n) {
    background: rgba(35, 108, 195, 0.2);
    // background-color: #003774;
  }

  .tbody.even {
    .tableRow {
      &:nth-child(odd) {
        background: rgba(35, 108, 195, 0.2);
        // background-color: #003774;
      }
    }
  }

  .tbody.odd {
    .noScroll {
      &:nth-child(odd) {
        background: rgba(35, 108, 195, 0.2);
        // background-color: #003774;
      }
    }
  }
}

.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.05px solid #004482;
}

.rowClick {
  cursor: pointer;
}
</style>
